<template>
  <div class="search">
    <a-card style="margin-bottom:10px;">
      <p slot="title">
        <span>{{ title }}</span>
      </p>
      <a-row style="position:relative">
        <a-table :loading="loading"
          rowKey="id"
          :dataSource="data"
          :pagination="false"
          ref="table">
          <a-table-column title="#"  width="50">
            <template slot-scope="t,r,i" >
              <span>{{ i+1 }}</span>
            </template>
          </a-table-column>
          <a-table-column title="任务名称" dataIndex="title"  width="150" align="center">
            <template slot-scope="t, record">
              <a @click="handleInfoDetail(record.procInstId, record.title)">
                <span>{{ t }}</span>
              </a>
            </template>
          </a-table-column>
          <a-table-column title="处理人" dataIndex="assignees"  width="150" align="center">
            <template slot-scope="t">
              <div v-if="t">
                <span v-for="(item, index) in t" :key="index">
                  <span v-if="item.isExecutor" style="color: #00DB00;">{{item.username}} </span>
                  <span v-else style="color: #999;">{{item.username}} </span>
                </span>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="审批操作" dataIndex="deleteReason"  width="150" align="center">
            <template slot-scope="t">
              <span v-if="t.toString().indexOf('通过')>-1" style="color: #00DB00">{{t}}</span>
              <span v-else-if="t.toString().indexOf('驳回')>-1" style="color: red;">{{t}}</span>
              <span v-else>{{t}}</span>
            </template>
          </a-table-column>
          <a-table-column title="审批意见" dataIndex="comment"  width="150" align="center">
            <template slot-scope="t">
              <span>{{t}}</span>
            </template>
          </a-table-column>
          <a-table-column title="耗时" dataIndex="duration"  width="150" align="center">
            <template slot-scope="t">
              <span>{{millsToTime(t)}}</span>
            </template>
          </a-table-column>
          <a-table-column title="创建时间" dataIndex="createTime"  width="150" align="center">
            <template slot-scope="t">
              <span>{{t}}</span>
            </template>
          </a-table-column>
          <a-table-column title="完成时间" dataIndex="endTime"  width="150" align="center">
            <template slot-scope="t">
              <span>{{t}}</span>
            </template>
          </a-table-column>
          <a-table-column title="状态" dataIndex="endTime" key="aaa" width="150" align="center">
            <template slot-scope="t">
              <span v-if="t" style="color: blue;">已办理</span>
              <span v-else style="color: #999999">待处理</span>
            </template>
          </a-table-column>
        </a-table>
      </a-row>
    </a-card>

    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="实时流程图">
        <a-card>
          <a-row style="position:relative">
            <img :src="imgUrl" />
            <a-spin size="large" fix v-if="loadingImg"></a-spin>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="表单数据" v-if="lcModa">
        <a-card>
          <!--流程表单-->
          <component :disabled="lcModa.disabled" :is="lcModa.formComponent"
          :processData="lcModa.processData" :isNew="lcModa.isNew" :task="lcModa.isTask"
          @afterSubmit="afterSub"
          @passTask="pass(lcModa.processData)"
          @backTask="back(lcModa.processData)"
          @close="lcModa.visible=false,lcModa.disabled = false"></component>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      :title="modalTitle"
      v-model="visible"
      :footer="null"
      :maskClosable="false" width="80%">
      <purchase-order ref="purchaseOrder"></purchase-order>
      <purchase-order-stock-in ref="purchaseOrderStockIn"></purchase-order-stock-in>
      <purchase-order-sales-return ref="purchaseOrderSalesReturn"></purchase-order-sales-return>
      <in-or-out-order ref="inOrOutOrder"></in-or-out-order>
      <customer-contract ref="customerContract"></customer-contract>
      <transfers-order ref="transfersOrder"></transfers-order>
      <project-settlement ref="projectSettlement"></project-settlement>
      <project-payment ref="projectPayment"></project-payment>
      <customer-contract ref="customerContract"></customer-contract>
      <customer-scrap-order ref="customerScrapOrder"></customer-scrap-order>
    </a-modal>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
import { getAction, postAction } from '@/api/manage'
import PurchaseOrder from './form/PurchaseOrder';
import PurchaseOrderStockIn from './form/PurchaseOrderStockIn';
import PurchaseOrderSalesReturn from './form/PurchaseOrderSalesReturn';
import InOrOutOrder from './form/InOrOutOrder';
import TransfersOrder from './form/TransfersOrder';
import ProjectSettlement from './form/ProjectSettlement';
import ProjectPayment from './form/ProjectPayment'
import CustomerContract from './form/CustomerContract';
import CustomerScrapOrder from './form/CustomerScrapOrder'

export default {
  name: "historic_detail",
  mixins:[activitiMixin,JeecgListMixin],
  components: {
    PurchaseOrder,
    PurchaseOrderStockIn,
    PurchaseOrderSalesReturn,
    InOrOutOrder,
    TransfersOrder,
    ProjectSettlement,
    ProjectPayment,
    CustomerContract,
    CustomerScrapOrder,
  },
  props: {
    procInstId: {
      type: String,
      default: '',
      required: true
    },
    title:{
      type: String,
      default: '',
      required: true
    },
    lcModa: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      url:{
        getByProcInstId: '/actBusiness/getByProcInstId',
        historicFlow:'/actTask/historicFlow/',
        getHighlightImg:`${window._CONFIG['domianURL']}/activiti/models/getHighlightImg/`
      },
      type: 0,
      loading: false, // 表单加载状态
      loadingImg: false,
      visible: false,
      modalTitle: '',
      data: [],
      id: "",
      imgUrl: "",
      backRoute: ""
    };
  },
  created() {
    this.init();
  },
  watch: {
    procInstId:function(newval ,oldName) {
      this.init();
    }
  },
  methods: {
    loadData(){

    },
    init() {
      this.id = this.procInstId;
      this.imgUrl =this.url.getHighlightImg + this.id + "?time=" + new Date();
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      getAction(this.url.historicFlow+this.id).then(res => {
        this.loading = false;
        if (res.success) {
          this.data = res.result;
          if (!res.result || res.result.length == 0) {
            this.$message.info( "未找到该记录审批历史数据,历史数据可能已被删除");
          }
        }else {
          this.$message.error( res.message);
        }
      });
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      // this.loadData();
    },
    callback(key){
    },
    afterSub(){
    },
    pass(v){
      this.$emit('passTask',v)
    },
    back(v){
      this.$emit('backTask',v)
    },
    handleInfoDetail(id, name) {
      this.modalTitle = name;
      this.visible = true;
      getAction(this.url.getByProcInstId, {
        procInstId: id
      }).then(res => {
        if(res.success) {
          if(name === '采购订单') {
            this.$refs.purchaseOrder.show = true;
            this.$refs.purchaseOrder.initData(JSON.parse(res.result.params));
          } else if(name === '采购入库单') {
            this.$refs.purchaseOrderStockIn.show = true;
            this.$refs.purchaseOrderStockIn.initData(JSON.parse(res.result.params));
          } else if(name === '采购退货单') {
            this.$refs.purchaseOrderSalesReturn.show = true;
            this.$refs.purchaseOrderSalesReturn.initData(JSON.parse(res.result.params));
          } else if(name === '其他入库单' || name === '其他出库单') {
            this.$refs.inOrOutOrder.show = true;
            this.$refs.inOrOutOrder.initData(JSON.parse(res.result.params), name);
          } else if(name === '调拨') {
            this.$refs.transfersOrder.show = true;
            this.$refs.transfersOrder.initData(JSON.parse(res.result.params));
          } else if(name === '项目结算') {
            this.$refs.projectSettlement.show = true;
            this.$refs.projectSettlement.initData(JSON.parse(res.result.params));
          } else if(name === '项目收款') {
            this.$refs.projectPayment.show = true;
            this.$refs.projectPayment.initData(res.result.params);
            this.$refs.projectPayment.initAccountData();
          } else if(name === '客户合同') {
            this.$refs.customerContract.show = true;
            this.$refs.customerContract.initData(JSON.parse(res.result.params));
          } else if (name === '客户废单'){
            this.$refs.customerScrapOrder.show = true;
            this.$refs.customerScrapOrder.initData(JSON.parse(res.result.params));
          }
        }
      })
    }
  },
};
</script>
<style lang="less">
</style>